<template>
  <label @click="onOpen" :style="currentStyle" class="mx-marker-simple" onselectstart="return false;">
    <div class="mx-marker-simple-label" :class="`is-${ currentState }`" :style="{ color: currentColor }">
      <div class="mx-marker-simple-label-icon">
        <img class="mx-marker-simple-label-image" :src="currentSrc">
        <div 
          v-if="currentText"
          class="mx-marker-simple-label-title" 
          :class="[
            `is-${ currentTextPos }`, 
            { 'is-transparent': currentColor === 'transparent' }
          ]">
          <p><span class="mx-marker-simple-label-text">{{ currentText }}</span></p>
          <i class="sj-down"></i>
        </div>
      </div>
    </div>
  </label>
</template>

<script>
import basic from "./basic.vue";
import common from "../common.js";
import _ from "lodash";

export default {
  extends: basic,
  computed: {
    currentSrc() {
      let src = common
        .case(this.currentMarker.src)
        .string(val => val)
        .object(val => val[this.currentState])
        .array(val => val[this.currentState])
        .function(val => val.call(this, this.prop))
        .default()
      return typeof src === 'function' ? src.call(this, this.prop) : src
    },
    currentText() {
      return common
        .case(this.currentMarker.text)
        .string(val => _.get(this.prop, val))
        .function(val => val.call(this, this.prop))
        .default()
    },
    currentColor() {
      let color = common
        .case(this.currentMarker.color)
        .string(val => val)
        .object(val => val[this.currentState])
        .array(val => val[this.currentState])
        .function(val => val.call(this, this.prop))
        .default()
      return typeof color === 'function' ? color.call(this, this.prop) : color
    },
    currentTextPos() {
      return common
        .case(this.currentMarker.textPos)
        .string(val => val)
        .object(val => val[this.currentState])
        .array(val => val[this.currentState])
        .function(val => val.call(this, this.prop))
        .default("left")
    },
    currentSize() {
      let [width, height] = common
        .case(this.currentMarker.size)
        .array(val => val)
        .function(val => val.call(this, this.prop))
        .default([30, 42]);
      width = Number(width);
      height = Number(height);
      return [width, height];
    },
    currentOffSet() {
      let [width, height] = this.currentSize;
      return common
        .case(this.currentMarker.offset)
        .array(val => val)
        .function(val => val.call(this, this.prop))
        .default([-width / 2, -height]);
    },
    currentStyle() {
      let [dx, dy] = this.currentOffSet;
      let [width, height] = this.currentSize;
      return Object.assign({}, this.basicStyle, {
        width: `${width}px`,
        height: `${height}px`,
        transform: `translate3d(${dx}px, ${dy}px, 0)`
      });
    }
  },
  methods: {
    setInfoWindowDefaultOffset(layer) {
      if (!layer.infoWindow) {
        layer.infoWindow = {};
      }
      let [width, height] = this.currentSize;
      layer.infoWindow.offset = layer.infoWindow.offset || [0, height * 3 / 5];
      return layer;
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
.mx-marker-simple {
  position: absolute;
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0px solid rgba(7, 3, 3, 1);
  color: rgba(238, 238, 238, 1);
  padding: 0px;
  white-space: nowrap;
  z-index: 100000;
  font-size: 16px;
  line-height: 20px;
  font-family: '微软雅黑';
  height: auto;
  user-select: none;

  &-label {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    overflow: visible;
    user-select: none;
    color: #1aa2ff;

    &.is-normal {
      color: #25b384;
    }

    &.is-alarm {
      color: red;
    }

    &.is-warning {
      color: #f6b845;
    }

    &.is-off {
      color: gray;
    }

    &-icon {
      position: relative;
      width: 100%;
      height: 100%;
    }

    &-image {
      display: block;
      width: 100%;
      height: 100%;
    }

    &-title {
      position: absolute;
      border-radius: 2px;
      background-color: currentColor;

      &.is-center {
        left: 50%;
        top: -35px;
        transform: translateX(-50%);

        .sj-down {
          transform: translateX(-6px);
          left: 50%;
        }
      }

      &.is-right {
        right: 50%;
        top: -35px;
        transform: translateX(20px);

        .sj-down {
          right: 14px;
        }
      }

      &.is-left {
        left: 50%;
        top: -35px;
        transform: translateX(-20px);

        .sj-down {
          left: 14px;
        }
      }

      &.is-transparent {
        top: -26px;
      }
    }

    &-text {
      font-size: 14px;
      display: block;
      min-width: 1em;
      max-width: 16em;
      line-height: 20px;
      padding: 4px 6px;
      color: #fff;
      text-shadow: none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .sj-down {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: currentColor;
    position: absolute;
  }
}
</style>
